<template>
  <div class="personnel-form-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <h2>{{ isEdit ? '编辑人员信息' : '添加人员' }}</h2>
          <el-button @click="$router.push('/personnel')" icon="el-icon-back">返回列表</el-button>
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        @submit.prevent="handleSubmit"
        class="personnel-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input 
                v-model="formData.name" 
                placeholder="请输入姓名"
                clearable
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number 
                v-model="formData.age" 
                :min="18" 
                :max="100"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select 
                v-model="formData.gender" 
                placeholder="请选择性别"
                style="width: 100%"
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input 
                v-model="formData.position" 
                placeholder="请输入职位"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系方式" prop="phone">
              <el-input 
                v-model="formData.phone" 
                placeholder="请输入联系方式"
                clearable
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="电子邮件" prop="email">
              <el-input 
                v-model="formData.email" 
                placeholder="请输入电子邮件"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="form-footer">
          <el-button 
            type="primary" 
            native-type="submit" 
            :loading="loading"
            size="large"
          >
            {{ isEdit ? '保存修改' : '添加人员' }}
          </el-button>
          <el-button 
            @click="$router.push('/personnel')"
            size="large"
          >
            取消
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import PersonnelService from '@/services/personnel.service'

export default {
  name: 'PersonnelForm',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const formRef = ref(null)
    const loading = ref(false)

    const isEdit = computed(() => !!route.params.id)

    const formData = ref({
      name: '',
      age: 18,
      gender: '',
      position: '',
      phone: '',
      email: ''
    })

    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
      gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
      position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
      phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    }

    const loadPersonnel = async (id) => {
      try {
        loading.value = true
        const data = await PersonnelService.getById(id)
        formData.value = data
      } catch (error) {
        ElMessage.error('获取人员信息失败')
        router.push('/personnel')
      } finally {
        loading.value = false
      }
    }

    const handleSubmit = async () => {
      if (!formRef.value) return

      try {
        await formRef.value.validate()
        loading.value = true

        if (isEdit.value) {
          await PersonnelService.update(route.params.id, formData.value)
          ElMessage.success('更新成功')
        } else {
          await PersonnelService.create(formData.value)
          ElMessage.success('添加成功')
        }

        router.push('/personnel')
      } catch (error) {
        ElMessage.error(isEdit.value ? '更新失败' : '添加失败')
      } finally {
        loading.value = false
      }
    }

    onMounted(() => {
      if (isEdit.value) {
        loadPersonnel(route.params.id)
      }
    })

    return {
      formRef,
      formData,
      loading,
      isEdit,
      rules,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.personnel-form-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.form-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.personnel-form {
  padding: 20px 0;
}

.form-footer {
  margin-top: 40px;
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__inner) {
  height: 40px;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-form-item.is-error .el-input__inner) {
  box-shadow: none;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .el-col {
    width: 100% !important;
  }
  
  .personnel-form-container {
    padding: 10px;
  }
  
  .form-footer {
    margin-top: 20px;
  }
}
</style> 